<template>
	<view>
		<view class="nav">
			<view :class="{'style':flag==0}" @click="nav(0)">全部</view>
			<view :class="{'style':flag==1}" @click="nav(1)">待付款</view>
			<view :class="{'style':flag==2}" @click="nav(2)">待发货</view>
			<view :class="{'style':flag==3}" @click="nav(3)">待收货</view>
			<view :class="{'style':flag==4}" @click="nav(4)">待评价</view>
		</view>
		<view v-if="list.length>0">
			<view class="g-item" v-for="item in list">
				<view class="danhao">
					<text>订单号: </text><text>{{item.orderNo}}</text>
					<view class="jishi" v-if="item.payStatus==10">
						<!-- endTime为结束的时间 startTime为请求到的当前服务端时间  格式YYYY-MM-DD HH:mm:ss-->
						<countdown :endTime="item.endTime" :startTime="item.newTime" :id="item.orderId" @overTime="delTime"/>
					</view>
				</view>
				<view>
					<view class="i-t" v-for="it in item.orderGoodsList" @click="toproduct(it.goodsId)">
						<view>
							<image :src="it.imageUrl" class="goodsimg"></image>
						</view>
						<view class="i-r">
							<view class="name">{{it.goodsName}}</view>
							<view class="ban"><text v-if="it.goodsAttr.trim()!=''">规格：</text>{{it.goodsAttr}}</view>
							<view class="num" v-if="item.isVip==1">￥{{it.totalPrice}} * {{it.totalNum}}</view>
							<view class="num" v-if="item.isVip==2">{{it.totalPrice}}积分 * {{it.totalNum}}</view>
							<view class="num" v-if="item.isVip==3">￥{{it.totalPrice}} * {{it.totalNum}}</view>
						</view>
					</view>
					<view v-if="item.isVip==1" class="sf">实付：￥{{item.orderPrice}}</view>
					<view v-if="item.isVip==3" class="sf">实付：￥{{item.orderPrice}}</view>
					<view v-if="item.isVip==2" class="sf">实付：{{item.orderPrice}}积分</view>
					<view class="i-b">
						<!-- <view class="btn">取消订单</view> -->
						<view class="btn" v-if="item.expressNo!=''" @click="wuliu(item.expressNo,item.expressId)">查看物流</view>
						<view class="btn" @click="toorder(item.orderNo)">订单详情</view>
						<view class="btn" v-if="item.payStatus==10" @click="pay(item.orderNo,item.orderPrice)">立即支付</view>
						<view class="btn" v-if="item.isComment==0&&item.receiptStatus==20" @click="topinjia(item.orderGoodsList)">立即评价</view>
						<view class="btn" v-if="item.payStatus==20&&item.receiptStatus==10&&item.deliveryStatus==20" @click="check(item.orderId)">确认收货</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nolist">
			<image src="../../../static/cart/content.png" mode="aspectFill"></image>
			<view class="notitle">暂无订单~~~</view>
		</view>
	</view>
</template>

<script>
	import {orderList,confirmReceipt,delorder} from "../../../api/product.js"
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	export default {
		data() {
			return {
				flag: 0,
				num: 0,
				list: [],
				orderId: ''
			}
		},
		components: {
			countdown
		},
		onLoad(e) {
			this.flag = e.type
		},
		onShow() {
			this.list = []
			this.num = 0
			this.getInfo()
		},
		onReachBottom() {
			this.getInfo()
		},
		methods: {
			// 查看商品
			toproduct(id){
				uni.navigateTo({
					url:"/pages/product/detail?id="+id
				})
			},
			// 订单倒计时结束删除订单
			async delTime(e){
				console.log(e)
				let res=await this.get(delorder,{orderId:e})
				this.msg("订单取消成功","none")
				this.list = []
				this.num = 0
				this.getInfo()
				console.log(res)
			},
			// 将时间戳转成标准时间格式
			formatD(t) {
				// 只有转成字符串才有长度 number 不行
				if(t.toString().length == 10){
					t=t*1000
				}
			  var date = new Date(t);
			  var YY = date.getFullYear() + '-';
			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD +" "+hh + mm + ss;
			},
			// 立即评价
			topinjia(item) {

				let arr = []
				item.forEach(item => {
					let list = {
						imageUrl: item.imageUrl,
						orderId: item.orderId,
						goodsId: item.goodsId,
						goodsName: item.goodsName
					}
					arr.push(list)
				})
				console.log(arr)
				uni.navigateTo({
					url: "/pages/details/comment?data=" + JSON.stringify(arr)
				})
			},
			// 查看物流
			wuliu(order, id) {
				uni.navigateTo({
					url: "/pages/details/wuliudetails?id=" + id + "&order=" + order
				})
			},
			// 支付
			pay(order, price) {
				uni.navigateTo({
					url: "/pages/product/payorder?order=" + order + "&price=" + price
				})
			},
			// 查看详情
			toorder(id) {
				uni.navigateTo({
					url: "/pages/details/orderdetails?code=" + id
				})
			},
			async getInfo() {
				this.num++
				let res = await this.get(orderList, {
					pageNum: this.num,
					pageSize: 10,
					type: this.flag
				})
				this.orderId = res.data.list.orderId
				res.data.list.forEach(item => {
					item.endTime=this.$u.timeFormat(item.orderEndTime, 'yyyy-mm-dd hh:MM:ss')
					item.newTime=this.$u.timeFormat(item.orderRequestTime, 'yyyy-mm-dd hh:MM:ss')
					this.list.push(item)
				})
			},
			nav(e) {
				this.flag = e
				this.num = 0
				this.list = []
				this.getInfo()
			},
			// 确认收货
			check(id) {
				this.showMd("是否确认收货", () => {
					this.get(confirmReceipt, {
						orderId: id
					}).then(res => {
						console.log(res)
						this.num = 0
						this.list = []
						this.getInfo()
					})
				})
			}
		}
	}
</script>

<style>
	.sf {
		padding-left: 0rpx;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.notitle {
		text-align: center;
		font-size: 28rpx;
	}

	.nolist>image {
		width: 200rpx;
		height: 200rpx;
		margin-left: 275rpx;
		margin-top: 300rpx;
	}

	.btn {
		padding: 10rpx 20rpx;
		border-radius: 60rpx;
		border: 1px #999 solid;
		line-height: 26rpx;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.i-b {
		display: flex;
		justify-content: flex-end;
	}

	.num {
		font-size: 32rpx;
		color: #F0812D;
		margin-top: 20rpx;
	}

	.ban {
		color: #666666;
		font-size: 24rpx;
		height: 34rpx;
	}

	.name {
		width: 500rpx;
		max-height: 90rpx;
		line-height: 45rpx;
		font-size: 28rpx;
		color: #666;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */
	}

	.i-r {
		width: 500rpx;
		margin-left: 40rpx;
		height: 200rpx;
		line-height: 45rpx;
	}

	.goodsimg {
		width: 150rpx;
		height: 150rpx;
	}

	.danhao {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}
	.jishi{
		position: absolute;
		right: 0rpx;
	}
	.i-t {
		display: flex;
		align-items: center;
		height: 200rpx;
		margin-top: 30rpx;
	}

	.g-item {
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
		padding: 30rpx;
	}

	.style {
		border-bottom: 4rpx #F0812D solid;
		color: #F0812D;
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		height: 60rpx;
		line-height: 60rpx;
	}

	page {
		background-color: #F6F6F6;
	}
</style>
